<template>
  <!-- @closed="editing=false" 关闭屉式菜单  重置编辑状态为不编辑 -->
  <van-action-sheet :value="value" @closed="editing=false" @input="$emit('input', $event)" title="编辑频道">
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button v-if="!editing" @click="editing=true" size="mini" type="info" plain>编辑</van-button>
        <van-button v-else @click="editing=false" size="mini" type="danger" plain>完成</van-button>
      </div>
      <!-- 我的频道 -->
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="(item,index) in myChannels" :key="item.id">
          <span class="f12" :class="{red: activeIndex===index}" @click="enterChannel(index)">{{item.name}}</span>
          <van-icon v-show="editing && index!==0" class="btn" name="cross" @click="delChannelFn(item.id,index)"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="item in optChannels" :key="item.id">
          <span class="f12">频道{{item.name}}</span>
          <van-icon class="btn" name="plus" @click="addChannel(item)"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { getAllChannels, delChannel, addChannel } from '@/api/article.js'

export default {
  props: {
    // 打开/关闭的状态
    value: {
      type: Boolean,
      default: false
    },
    // 我的频道数据
    myChannels: {
      type: Array,
      // 复杂类型要通过函数返回默认值
      default: () => []
    },
    // 当前激活的频道
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 编辑状态
      editing: false,
      // 所有频道
      allChannels: []
    }
  },
  computed: {
    optChannels () {
      return this.allChannels.filter((all) => {
        return !this.myChannels.some(my => my.id === all.id)
      })
    }
  },
  methods: {
    // 添加频道
    async addChannel (channel) {
      const newChannel = this.myChannels.map((item, i) => {
        return {
          id: item.id,
          seq: i
        }
      })
      // 加入当前点击新增的
      newChannel.push({ ...channel, seq: newChannel.length })
      // console.log(newChannel)
      // 推出第一个 “推荐” 频道，防止后台出错
      newChannel.shift()
      try {
        // 调用接口频道
        await addChannel(newChannel)
        // 前端新增
        this.myChannels.push({ ...channel })
        this.$toast.success('新增成功')
      } catch (error) {
        this.$toast.fail('新增失败')
      }
    },
    // 删除频道
    async delChannelFn (id, index) {
      try {
        // 后台删除
        await delChannel(id)
        // 前台删除
        /**
         * 子组件正常是不能直接修改父组件数据的 ——> vue单向数据流
         * 有些情况下可以直接修改
         *   值类型不能直接修改
         *   引用类型可以修改变量内元素的指针，但不能修改该变量的指针（不能直接给这个变量重新赋值）
         */
        this.myChannels.splice(index, 1)
        // 如果删除的是选中频道之前的频道，动态样式根据索引来判断，就会出现
        if (index < this.activeIndex) {
          this.$emit('update:activeIndex', this.activeIndex - 1)
        }
        this.$toast.success('删除成功')
      } catch (error) {
        this.$toast.fail('删除失败')
      }
    },
    // 点击进入对应频道列表
    enterChannel (i) {
      // vue原则：单向数据流
      // 父组件 sync
      this.$emit('update:activeIndex', i)
      // 关闭
      this.$emit('input', false)
    },
    // 获取所有频道
    async getAllChannelsData () {
      try {
        const { data } = await getAllChannels()
        // console.log(data.channels)
        this.allChannels = data.channels
      } catch (error) {

      }
    }
  },
  created () {
    this.getAllChannelsData()
  }
}
</script>
<style lang="less" scoped>
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close,
    .van-action-sheet__close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    text-align: left;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: red;
  }
}
</style>
